<script setup lang="ts">
const showMedia = ref(false)
const props = defineProps({
  href:{
    type:String,
    default:''
  }
})
const play = ()=>{
  showMedia.value=  true
  document.body.style.overflow = 'hidden'
}
const close = ()=>{
  showMedia.value=  false
  document.body.style.overflow = ''
}

defineExpose({
  play
})
</script>

<template>
  <div class="dilog" v-if="showMedia">
    <div class="media-box">
      <div class="close-btn" title="结束播放" @click="close">
        <img src="~/assets/images/about/job/icon-job-close.png" alt="">
      </div>
    <video :src="href?href:'http://www.huatusoft.com/templates/green/video/video.mp4'" controls="controls"></video>
    </div>
  </div>
</template>

<style scoped lang="scss">
.dilog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #00000088;
  z-index: 99;
  .media-box{
    width: 12.11rem;
    height: 7.4rem;
    background: #FFFFFF;
    border-radius: 0.13rem;
    margin-left: 5.95rem;
    margin-top: 1rem;
    padding: 0.8rem 0.8rem;
    position: relative;
    &:hover{
      .close-btn{
        display: flex;
      }
    }
    .close-btn {
      display: none;
      position: absolute;
      right: 0.08rem;
      top: 0.06rem;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      width: 0.55rem;
      height: 0.56rem;
      background: #FFFFFF;
      box-shadow: 0rem 0.04rem 0.33rem 0.01rem rgba(0,0,0,0.13);
      border-radius: 1rem;

      img {
        display: block;
        width: 0.24rem;
        height: 0.24rem;
      }
    }
    video{
      max-width: 100%;
    }
  }

}

</style>
